<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <#include "../common/include_easyui.ftl">
    <#assign ctx = request.contextPath>
    <script type="text/javascript">
        var ctxPath = "${ctx}";

        var roleId = "${role.roleId?c}";

        jQuery(function () {
            var loadURL = ctxPath + "/roleMgrController/loadRoleMenuTree/" + roleId + "";
            jQuery("#tree_div").tree({

                method: "get",
                url: loadURL,
                lines: true,
                checkbox: true
            });

        })

        function saveData() {

            var isValid = jQuery("#modifyForm").form('validate');
            if (!isValid) {
                jQuery("#modifyForm").form('enableValidation');
            } else {
                var checkNodes = jQuery('#tree_div').tree('getChecked', ['checked', 'indeterminate']);
                var idArray = new Array();
                for (var i = 0; i < checkNodes.length; i++) {
                    var jsonObj = checkNodes[i];
                    var id = jsonObj.id;
                    idArray.push(id);
                }
                var roleMenuData = idArray.join(",");
                jQuery("#roleMenuData").val(roleMenuData);

                var saveURL = ctxPath + "/roleMgrController/modifyRole?date=" + new Date() + "";
                var paramObj = jQuery("#modifyForm").serializeArray();

                //alert(jQuery("#modifyForm").serialize())

                jQuery.post(saveURL, paramObj, function (responseData) {

                    var code = responseData.code;

                    if (code == "200") {
                        $.messager.alert('我的消息', '角色信息修改成功！', 'info', function () {
                            var parentWin = window.parent;
                            parentWin.jQuery("#div_table").datagrid("reload");
                            parentWin.jQuery('#dialog_div').dialog("close");
                        });

                    } else {
                        $.messager.alert('我的消息', "数据保存出错，原因 ：" + responseData.message, 'error');
                    }

                }, "json");
            }


        }
    </script>

    <style type="text/css">


        .modify-form div {
            margin-bottom: 20px;
            /* 	display: flex;
                justify-content:center; */
        }

        .modify-form div input {
            max-width: 400px;
            height: 28px;
            width: 100%;
        }
    </style>
</head>

<body>
<form id="modifyForm" method="post" class="modify-form">
    <div style="padding-left:12%;margin-top:20px;width: 80%;">
        <input class="easyui-textbox" name="roleId" value="${role.roleId?c}" readonly="true" labelAlign="right"
               data-options="label:'角色ID：',required:true">
    </div>
    <div style="padding-left:12%;width: 80%;">
        <input class="easyui-textbox" name="roleName" value="${role.roleName}" labelAlign="right" data-options="label:'角色名称：',required:true">
    </div>
    <div style="padding-left:12%;width: 80%;">
        <input class="easyui-textbox" name="roleRemark" value="${role.roleRemark}" labelAlign="right" data-options="label:'角色备注：',required:true">
    </div>
    <div style="padding-left:12%;width: 80%;">
        <label class="textbox-label textbox-label-before"
               style="float:left;text-align: right; height: 38px; line-height: 38px;">角色权限：</label>
        <div id="tree_div"
             style="padding-left:40px;padding-top:25px;float:left;height:195px;width: 277px;overflow-y: scroll;border: 1px solid #95B8E7;"></div>
        <Input type="hidden" name="roleMenuData" id="roleMenuData" />
    </div>
</form>

</body>
</html>
